<template>
  <div id="box">
    <div class="top">
      <p>{{list.userInfo.count}}</p>
      <p>累计积分(D分)</p>
    </div>
    <div class="clearfix">
      <div class="top-left">
        <p>{{list.userInfo.month}}</p>
        <p>本月</p>
      </div>
      <div class="top-right">
        <p>{{list.userInfo.day}}</p>
        <p>今日</p>
      </div>
    </div>
    <div>
      <div>
        <div style="margin:5px auto;font-size:16px">
          积分排名
        </div>
        <div
          class="cell"
          v-for="(item,i) in list.dept"
          :key="i"
        >
          <!-- <van-icon name="manager" color="yellow" /> -->
          <van-cell
            v-if="item.groupType!=3&&item.groupType!=2"
            icon="manager"
            :title="item.groupName"
            is-link
            :to="{path:'/ranking',query:{officeId:item.groupId,type:item.groupType}}"
          />
        </div>
      </div>
    </div>
    <div>
      <div>
        <div style="margin:5px auto;font-size:16px">
          部门排名
        </div>
        <div
          class="cell"
          v-for="(item,i) in list.dept"
          :key="i"
        >
          <van-cell
            v-if="item.groupType==3"
            icon="friends"
            color="yellow"
            :title="item.groupName"
            is-link
            :to="{path:'/ranking',query:{officeId:item.groupId,type:item.groupType}}"
          />
        </div>
      </div>
    </div>
    <div>
      <div>
        <div style="margin:5px auto;font-size:16px">
          自定义部门排名
        </div>
        <div
          class="cell"
          v-for="(item,i) in list.dept"
          :key="i"
        >
          <van-cell
            v-if="item.groupType==2"
            icon="friends"
            color="yellow"
            :title="item.groupName"
            is-link
            :to="{path:'/department',query:{officeId:item.groupId,type:item.groupType}}"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Card } from "vant";
import Tabbar from "@/components/tabbar";
import { Divider } from "vant";
import { Cell, CellGroup } from "vant";
import { Icon } from "vant";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getRanking();
  },
  methods: {
    async getRanking() {
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/Ranking?corpId=${corpId}&userId=${userId}`
      );
      this.list = res.data.data;
    }
  },
  components: {
    [Card.name]: Card,
    Tabbar,
    [Divider.name]: Divider,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon
  }
};
</script>
<style lang="less" scoped>
#box {
  padding-bottom: 55px;
  background: #fafafa;
  p {
    margin: 0px;
    // font-size: 15px;
  }
  p:last-child {
    font-size: 15px;
  }
  .cell {
    text-align: left;
    //  color: yellow
  }
  .van-divider::after,
  .van-divider::before {
    border-width: 3px 0px 0px !important;
    border-color: rgb(192, 192, 192);
  }
  .van-divider {
    margin: 5px 0px !important;
    font-size: 16px;
  }
  .top {
    margin: 0 auto;
    padding-top: 3vh;
    height: 100px;
    background-color: #fff;
  }

  .top-left {
    border: 1px solid silver;
    border-left: none;
    background-color: #fff;
    width: 50%;
    float: left;
    padding-top: 20px;
    padding-bottom: 15px;
  }
  .top-right {
    background-color: #fff;
    border: 1px solid silver;
    border-left: none;
    border-right: none;
    width: 49.7%;
    float: right;
    padding-top: 20px;
    padding-bottom: 15px;
  }
  /deep/ .van-cell__left-icon {
    color: rgb(245, 203, 16);
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
